<template>
	<view class="page-container">
	  <!-- 未登录提示区域 -->
	  <view class="login-section">
		<image 
		  class="mascot" 
		  src="/static/images/mascot.png" 
		  mode="aspectFit"
		></image>
		<view class="login-tips">
		  <text class="tip-text">您还没有登录</text>
		  <text>快去<text class="login-btn" @tap="goToLogin">登录</text>吧~</text>
		</view>
	  </view>
  
	  <!-- 底部导航栏 -->
	  <view class="tab-bar">
		<view class="tab-bar-item" @tap="goToZhouBao">
		  <!-- <text class="iconfont"></text> -->
		  <text>舟报</text>
		</view>
		<view class="tab-bar-item active" @tap="goToMy">
		  <!-- <text class="iconfont"></text> -->
		  <text>我的</text>
		</view>
		
	  </view>
	</view>
  </template>
  
  <script>
  import { navigateToMyPage, checkToken } from '../../src/utils/auth'

  export default {
	data() {
	  return {
		statusBarHeight: 20
	  }
	},
	onLoad() {
	  this.getStatusBarHeight()
	},
	methods: {
	  getStatusBarHeight() {
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
	  },
	  goToLogin() {
		uni.navigateTo({
		  url: '/pages/login/login'
		})
	  },
	  goToZhouBao() {
		uni.navigateTo({
		  url: '/pages/zhoubao/zhoubao'
		})
	  },
	  goToMy() {
		  uni.navigateTo({
		    url: '/pages/wode-guanzhu/wode-guanzhu'
		  })
	  }
	}
  }
  </script>
  
  <style scoped>
  .page-container {
	min-height: 100vh;
	background-color: #fff;
	position: relative;
  }
  
  .status-bar {
	background-color: #fff;
  }
  
  .nav-bar {
	height: 44px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0 30rpx;
  }
  
  .setting-icon {
	width: 44rpx;
	height: 44rpx;
  }
  
  .login-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 200rpx;
  }
  
  .mascot {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 40rpx;
  }
  
  .login-tips {
	display: flex;
	flex-direction: column;
	align-items: center;
  }
  
  .tip-text {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 20rpx;
  }
  
  .login-btn {
	font-size: 32rpx;
	color: orange;
	font-weight: bold;
	
  }
  
  .tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-top: 1rpx solid #eee;
	padding-bottom: env(safe-area-inset-bottom);
  }
  
  .tab-bar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #999;
  }
  
/*  .tab-bar-item.active {
	color: #8a2be2;
  } */
  
  .tab-bar-item .iconfont {
	font-size: 24rpx;
	margin-bottom: 6rpx;
  }
  
  /* iPhone X 及以上机型底部安全区域适配 */
/*  @supports (bottom: env(safe-area-inset-bottom)) {
	.tab-bar {
	  padding-bottom: env(safe-area-inset-bottom);
	}
  } */
  </style>